<template>
    <div>
        <my-header></my-header>
        <div class="cart">
            <a-tabs v-model:activeKey="activeKey" tab-position="left">
                <a-tab-pane key="1" tab="个人信息">
                    <div class="space">
                        <a-card title="基础资料" style="width: 100%; height: 80%; text-align: left">
                            <template #extra><a @click="modifyInfo">修改资料</a></template>
                            <div class="list">
                                <div class="title">
                                    头像:
                                </div>
                                <div class="list_content" style="width: 40px">
                                    <a-image style="width: 100%"
                                             :src="imgUrl"
                                             fallback="">
                                    </a-image>
                                </div>
                            </div>
                            <hr>
                            <div class="list">
                                <div class="title">
                                    昵称:
                                </div>
                                <div class="list_content">
                                    {{userInfo.nickname}}
                                </div>
                            </div>
                            <hr>
                            <div class="list">
                                <div class="title">
                                    手机号:
                                </div>
                                <div class="list_content">
                                    {{userInfo.mobile}}
                                </div>
                            </div>
                            <hr>
                            <div class="list">
                                <div class="title">
                                    性别:
                                </div>
                                <div class="list_content">
                                    <span v-if="userInfo.sex == 0">男</span>
                                    <span v-else>女</span>
                                </div>
                            </div>
                            <hr>
                            <div class="list">
                                <div class="title">
                                    账号是否可用:
                                </div>
                                <div class="list_content">
                                    <span v-if="userInfo.status == 0">可用</span>
                                    <span v-else>已禁用</span>
                                </div>
                            </div>
                            <hr>
                            <div class="list">
                                <div class="title">
                                    账号余额:
                                </div>
                                <div class="list_content">
                                    <span style="color: red">{{userInfo.balance}}</span>
                                </div>
                                <div>
<!--                                    <a-button type="link" block>充值</a-button>-->
                                </div>
                            </div>
                            <hr>
                            <div class="list">
                                <div class="title">
                                    收货地址:
                                </div>
                                <div class="list_content">
                                    <span v-if="address">{{ address }}</span>
                                    <span v-else>暂无</span>
                                </div>
                            </div>
                            <hr>
                        </a-card>
                    </div>
                </a-tab-pane>
                <a-tab-pane key="2" tab="我的订单">
                    <div class="bg">
                        <div class="tableBox">
                            <a-table :loading="loading"
                                     :dataSource="tableData"
                                     :rowKey="(record , index) => {return record.id}"
                                     :pagination="pagination"
                                     @change="changeTable"
                                     :columns="columns">
                                <template #sn="{ text}">
                                    <span style="color: red">{{text}}</span>
                                </template>
                                <template #nickname="{ record}">
                                    <span style="color: #000">{{record.addressEntity.name}}</span>
                                </template>
                                <template #phone="{ record}">
                                    <span style="color: #0FBA8E">{{record.addressEntity.phone}}</span>
                                </template>
                                <template #address="{ record}">
                                    <span style="color: #000">{{record.addressEntity.detailAddress}}</span>
                                </template>
                                <template #action="{record}">
                                    <a-button type="link" @click="detailHandle(record)">详情</a-button>
                                </template>
                            </a-table>
                        </div>
                    </div>
                </a-tab-pane>
                <a-tab-pane key="3" tab="我的评价">
                    <div class="bg">
                        <div class="tableBox">
                            <a-table :loading="tableEvaluate.loading"
                                     :dataSource="tableEvaluate.tableData"
                                     :rowKey="(record , index) => {return record.id}"
                                     :pagination="tableEvaluate.pagination"
                                     @change="changeEvaluateTable"
                                     :columns="tableEvaluate.columns">
                                <template #goodsName="{ record}">
                                    {{record.goodsEntity.goodsName}}
                                </template>
                                <template #shopName="{ record}">
<!--                                    <span style="color: #4EB1F7" v-if="text=='1'">是</span>-->
<!--                                    <span v-else style="color: #0FBA8E">否</span>-->
                                    <span>{{record.goodsEntity.shopName}}</span>
                                </template>
                                <template #typeName="{ record}">
                                    {{record.goodsEntity.typeName}}
                                </template>
                                <template #content="{text}">
                                    <span style="color: red">{{text}}</span>
                                </template>
                                <template #action="{record}">
                                    <a-button type="link" danger @click="deleteEvaluate(record)">删除</a-button>
                                </template>
                            </a-table>
                        </div>
                    </div>
                </a-tab-pane>
                <a-tab-pane key="4" tab="余额充值">
                    <div v-if="!createRecord" class="bg">
                        <div class="money">
                            <div class="title">
                                <h2 style="padding-top: 20px">账户余额</h2>
                            </div>
                            <div class="item">
                                <div style="font-size: 17px">当前余额:</div>
                                <div style="margin-left: 10px; margin-right: 50px; font-size: 18px; color: #ff4d4f">{{userInfo.balance}}元</div>
                                <a-button type="primary" @click="toApply">充值</a-button>
                            </div>
                        </div>
                        <hr>
                        <div class="record"></div>
                    </div>
                    <div v-if="createRecord" class="bg">
                        <div class="money">
                            <div class="title">
                                <h2 style="padding-top: 20px">请选择充值金额:</h2>
                            </div>
                            <div class="item" style="margin-top: 50px">
                                <div style="font-size: 17px; width: 150px">请选择充值点数:</div>
                                <a-radio-group v-model:value="money" @change="changeMoney">
                                    <a-space>
                                        <a-radio-button :value=10>10元</a-radio-button>
                                        <a-radio-button :value=50>50元</a-radio-button>
                                        <a-radio-button :value=100>100元</a-radio-button>
                                        <a-radio-button :value=200>200元</a-radio-button>
                                        <a-radio-button :value=1000>1000元</a-radio-button>
                                    </a-space>
                                </a-radio-group>
<!--                                <a-input-->
<!--                                    ref="moneyRef"-->
<!--                                    v-model:value="anyMoney"-->
<!--                                    placeholder="请输入随意金额"-->
<!--                                    style="width: 300px"-->
<!--                                    type="number"-->
<!--                                >-->
<!--                                    <template #addonAfter>-->
<!--                                        元-->
<!--                                    </template>-->
<!--                                </a-input>-->
                            </div>
                            <div class="item" style="margin-top: 30px">
                                <div style="font-size: 17px; width: 150px">推荐支付方式:</div>
                                <a-radio v-model:checked="checked">
                                    <img style="width: 140px" src="@/assets/img/userCenter/apply.jpeg" alt="">
                                </a-radio>
                            </div>
                            <div class="item" style=" margin: 30px 50px">
                                <a-button type="primary" style="margin-right: 30px" @click="back">返回上一级</a-button>
                                <a-button type="danger" @click="applyMoney">立即支付</a-button>
                            </div>
                        </div>
                    </div>
                </a-tab-pane>
                <a-tab-pane key="5" tab="修改密码和地址">
                    <div class="bg" style="display: flex; justify-content: space-between">
                        <div class="password">
                            <h1>修改密码</h1>
                            <a-form
                                layout="vertical"
                                :model="codeForm"
                                :rules="registerRules"
                                ref="codeFormRef"
                                :wrapper-col="wrapperCol">
                                <a-form-item label="手机号:" name="mobile">
<!--                                    <a-input-search-->
<!--                                        v-model:value="codeForm.mobile"-->
<!--                                        placeholder="input search text"-->
<!--                                        style="width: 200px"-->
<!--                                        @search="getLoginCode"-->
<!--                                    />-->
                                    <a-input-search
                                        v-model:value="codeForm.mobile"
                                        placeholder="请输入手机号"
                                        enter-button="获取验证码"
                                        style="width: 100%"
                                        :loading=codeLoading
                                        @search="getLoginCode"
                                    />
                                </a-form-item>
                                <a-form-item label="验证码:" name="ssmCode ">
                                    <a-input v-model:value="codeForm.ssmCode " placeholder="请输入验证码" />
                                </a-form-item>

                                <a-form-item label="新密码:" name="type">
                                    <a-input v-model:value="codeForm.newPass " placeholder="请输入验证码" />
                                </a-form-item>
                                <a-form-item :wrapper-col="{ span: 24, offset: 4 }">
<!--                                    <a-button type="primary" @click.prevent="codeLogin">登录</a-button>-->
                                    <a-button style="margin-left: 10px" @click="resetPassword">重置</a-button>
                                </a-form-item>
                            </a-form>
                        </div>
                        <div class="address">
                            <h1>修改地址</h1>
                            <a-form :model="addressForm" layout="vertical">
                                <a-form-item label="收货手机号:" name="mobile" :rules="{required: true, message: '请输入修改的地址', trigger: 'blur'}">
                                    <a-input disabled v-model:value="addressForm.mobile" />
                                </a-form-item>
                                <a-form-item label="收货昵称:" name="nickname" :rules="{required: true, message: '请输入修改的地址', trigger: 'blur'}">
                                    <a-input disabled v-model:value="addressForm.nickname" />
                                </a-form-item>
                                <a-form-item label="修改收货地址:" name="address" :rules="{required: true, message: '请输入修改的地址', trigger: 'blur'}">
                                    <a-input v-model:value="addressForm.address" />
                                </a-form-item>
                                <a-form-item :wrapper-col="{ span: 24, offset: 4 }">
                                    <a-button type="primary" @click="updateAddress">修改</a-button>
<!--                                    <a-button style="margin-left: 10px" @click="resetPassword">重置</a-button>-->
                                </a-form-item>

                            </a-form>
                        </div>
                    </div>
                </a-tab-pane>
            </a-tabs>
        </div>
        <ModalModifyInfo :data="modalData.formState" :visible="modalData.showAdd" @close="handleClose"></ModalModifyInfo>
        <!--  详情      -->
        <common-modal :data="detailData.formState" :visible="detailData.showAdd" :title="detailData.title" :typeName="detailData.typeName" @close="handleDetailClose"></common-modal>
    </div>
</template>

<script>
import myHeader from './components/header'
import {defineComponent, reactive, onMounted, toRefs, ref, watch} from "vue";
import {
    getImgUrl,
    apiPayLog,
    apiPayMoney,
    apiUpdateInfo,
    apiGetUserInfo,
    apiGetOrderList,
    apiGetComment,
    apiDeleteComment,
    apiGetUserCode,
    apiUpdatePass, apiUserLogin, apiUpdateAddress, apiGetUserAddress, apiAddAddress, apiGetDetail, apiGetOrderDetail
} from "../../api";
import ModalModifyInfo from "./components/ModalModifyInfo";
import {useRouter} from "vue-router";
import {message} from "ant-design-vue";
import commonModal from "../shopCenter/orderList/components/commonModal";


export default defineComponent({
    name: "userCenter",
    components: { myHeader, ModalModifyInfo, commonModal },
    setup() {
        const router = useRouter()
        const moneyRef = ref()
        const activeKey = ref('1')
        const state = reactive({
            userInfo: {},
            imgUrl: '',
            createRecord: false,
            money: 100,
            anyMoney: null,
            checked: true,
            codeLoading: false,
            address: ''
        })

        const modalData = reactive({
            formState: {},
            showAdd: false,
            title: "",
            typeName: ""
        })

        const detailData = reactive({
            formState: {},
            showAdd: false,
            title: "",
            typeName: ""
        })

        // 订单table
        const tableDataOrder = reactive({
            loading: false,
            tableData: [],
            pagination: {
                current: 1,
                pageSize: 10,
                total: 1,
                showSizeChanger: true,
                showTotal: (total) => {
                    return `共 ${total} 条`
                }
            },
            scroll: { x: 1000, y: 300 },
            columns: [
                {
                    title: "序号",
                    width: 100,
                    align: 'center',
                    customRender: (text) => `${text.index + 1}`
                },
                {
                    title: "订单号",
                    dataIndex: "sn",
                    key: "sn",
                    align: 'center',
                    width: 200,
                    slots: {
                        customRender: "sn"
                    },
                    ellipsis: true
                },
                {
                    title: "收货人",
                    dataIndex: "nickname",
                    key: "nickname",
                    align: 'center',
                    // width: 120,
                    slots: {
                        customRender: "nickname"
                    },
                    ellipsis: true
                },
                {
                    title: "手机号",
                    dataIndex: "phone",
                    align: 'center',
                    // width: 200,
                    key: "phone",
                    slots: {
                        customRender: "phone"
                    },
                    ellipsis: true
                },
                {
                    title: "收货地址",
                    dataIndex: "address",
                    key: "address",
                    align: 'center',
                    // width: 150,
                    slots: {
                        customRender: "address"
                    },
                    ellipsis: true
                },


                {
                    title: "添加时间",
                    dataIndex: "createTime",
                    align: 'center',
                    key: "createTime",
                    width: 200,
                    ellipsis: true
                },
                {
                    title: "操作",
                    key: "action",
                    align: 'center',
                    width: 150,
                    slots: {
                        customRender: "action"
                    }
                }
            ]
        })

        // 评价table
        const tableEvaluate = reactive({
            loading: false,
            tableData: [],
            pagination: {
                current: 1,
                pageSize: 10,
                total: 1,
                showSizeChanger: true,
                showTotal: (total) => {
                    return `共 ${total} 条`
                }
            },
            scroll: { x: 1000, y: 300 },
            columns: [
                {
                    title: "序号",
                    width: 150,
                    align: 'center',
                    customRender: (text) => `${text.index + 1}`
                },
                {
                    title: "商品名称",
                    dataIndex: "goodsName",
                    key: "goodsName",
                    align: 'center',
                    // width: 120,
                    slots: {
                        customRender: "goodsName"
                    },
                    ellipsis: true
                },
                {
                    title: "商品所属店铺",
                    dataIndex: "shopName",
                    align: 'center',
                    // width: 200,
                    key: "shopName",
                    slots: {
                        customRender: "shopName"
                    },
                    ellipsis: true
                },
                {
                    title: "商品所属分类",
                    dataIndex: "typeName",
                    key: "typeName",
                    align: 'center',
                    // width: 150,
                    slots: {
                        customRender: "typeName"
                    },
                    ellipsis: true
                },
                {
                    title: "评价",
                    dataIndex: "content",
                    align: 'center',
                    key: "content",
                    slots: {
                        customRender: "content"
                    },
                    ellipsis: true
                },


                {
                    title: "添加时间",
                    dataIndex: "createTime",
                    align: 'center',
                    key: "createTime",
                    width: 200,
                    ellipsis: true
                },
                {
                    title: "操作",
                    key: "action",
                    align: 'center',
                    width: 150,
                    slots: {
                        customRender: "action"
                    }
                }
            ]
        })

        // 忘记密码表单
        const codeForm = reactive({
            mobile: '18939450951',
            ssmCode: '',
            newPass: ''
        })



        // 自定义检验手机号
        let checkMobile = (rule, value) => {
            if (!value) {
                return Promise.reject('请输入手机号');
            }
            if (/^1[0-9]{10}$/.test(value)) {
                return Promise.resolve();
            } else {
                return Promise.reject('请输入合法的手机号');
            }
        }

        const registerRules = {
            mobile: [
                { required: true, validator: checkMobile, trigger: ['blur', 'change'] },
            ],
            password: [
                { required: true, message: '请输入密码', trigger: 'blur'},
            ],
            code: [
                { required: true, message: '请输入短信验证码', trigger: 'blur'},
            ]
        }

        // 获取个人信息
        const getUserInfo = async () => {
            const { data } = await apiGetUserInfo({})
            if (data.code == 200) {
                state.userInfo = data.data
                console.log(333, state.userInfo)
                const user = JSON.stringify(data.data)
                window.localStorage.setItem('user', user)
            }
            if (data.code == 500) {
                message.warning(data.msg || '您尚未登录')
                await router.replace('/userLogin')
            }
        }

        // 修改地址表单
        const addressForm = reactive({
            address: '',
            mobile: state.userInfo?.mobile,
            nickname: state.userInfo?.nickname
        })

        // console.log(1000000000, state.userInfo)

        // 获取地址
        const getUserAddress = async () => {
            const params = {
                id: state.userInfo.id
            }
            const addres = await apiGetUserAddress(params)
            // console.log(999999, addres)
            state.address = addres.data.data.detailAddress
        }

        // 获取头像
        const getAvatar = async () => {
            const params = {
                filename: state.userInfo.headPic
            }
            const imgData = await getImgUrl(params)
            const imageUrl = `data: image/jpeg;base64,${btoa(new Uint8Array(imgData.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))}`
            state.imgUrl = imageUrl
        }

        // 修改个人信息
        const modifyInfo = () => {
            // modalData.showAdd = true
            const data = {...state.userInfo, ...{img: state.imgUrl}}
            modalData.showAdd = true
            modalData.title = "编辑信息"
            modalData.formState = data
        }
        // 先获取个人信息再修改头像


        // 关闭修改个人信息
        const handleClose = (val) => {
            if (val == 'edit') {
                // 调用编辑接口
                apiUpdateInfo(modalData.formState).then(async (res) => {
                    if (res.data.code == 200 ) {
                        message.success('修改成功')
                        await getUserInfo()
                        await getAvatar()
                        await getUserAddress()
                        // 调用获取人员信息接口
                        // 调用获取人员信息接口
                        // 调用获取人员信息接口
                    }
                })
            }
            modalData.showAdd = false
        }


        // 点击充值，跳转到充值金额页面，生成一天记录
        const toApply = () => {
            //
            state.createRecord = true
        }
        // 返回上一级
        const back = () => {
            state.createRecord = false
        }



        const changeMoney = (e) => {
            console.log(e)
            console.log(22, moneyRef)
        }

        // 支付
        const applyMoney = () => {
            // 调用接口
            const params = {
                money: state.money,
                paymentType: '支付宝'
            }
            apiPayLog(params).then((res) => {
                if (res.data.code == 200) {
                    // 记录生成成功，调用接口支付
                    const sn = {
                        sn: res.data.data
                    }
                    apiPayMoney(sn).then((res) => {
                        console.log(res)
                        if (res.data.code == 200) {
                            // let routerData = router.resolve({path:'/payGateWay',query:{ htmlData: res.data.msg}})
                            // window.open(routerData.href, '_ blank')
                            // window.location.href = res.data.msg
                            // window.open(res.data.msg, '_blank');
                            const divForm = document.getElementsByTagName('div')
                            if (divForm.length) {
                                document.body.removeChild(divForm[0])
                            }
                            const div = document.createElement('div')
                            div.innerHTML = res.data.msg // data就是接口返回的form 表单字符串
                            document.body.appendChild(div)
                            document.forms[0].setAttribute('target', '_blank')
                            document.forms[0].submit()
                        }
                    })
                }
            })
        }

        // 获取订单
        const getOrderList = () => {
            apiGetOrderList({}).then((res) => {
                if (res.data.code == 200) {
                    tableDataOrder.tableData = res.data.data
                    tableDataOrder.pagination.total = res.data.data.length
                }
            })
        }

        // 订单中心分页
        const changeTable = (pagination) => {
            console.log('qwe', pagination)
            tableDataOrder.pagination.pageSize = pagination.pageSize
            tableDataOrder.pagination.current = pagination.current
            getOrderList()
            // getLogs()
        }

        // 获取评价中心列表
        const getEvaluateList = () => {
            const params = {
                accountId: state.userInfo.id
            }
            apiGetComment(params).then((res) => {
                if (res.data.code == 200) {
                    tableEvaluate.tableData = res.data.data.list
                    tableEvaluate.pagination.total = res.data.totalCount
                }
            })
        }

        // 评价中心分页
        const changeEvaluateTable = () => {
            tableDataOrder.pagination.pageSize = pagination.pageSize
            tableDataOrder.pagination.current = pagination.current
        }

        // 删除评价
        const deleteEvaluate = (record) => {
            console.log(record)
            const params = [record.id]
            apiDeleteComment(params).then((res) => {
                if (res.data.code == 200) {
                    message.success('删除成功')
                    getEvaluateList()
                }
            })
        }

        // 修改密码获取验证码
        const getLoginCode = async () => {
            // 首先判断手机号存不存在
            if (!codeForm.mobile) {
                message.warning('请输入手机号')
                return
            }
            state.codeLoading = true
            if (!(/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(codeForm.mobile))) {
                const params = {
                    mobile: codeForm.mobile,
                    sms_code_method: 'user_update_pwd_sms_code'
                }
                await apiGetUserCode(params)
                state.codeLoading = false
            } else {
                message.warning('请输入合法的手机号')
                state.codeLoading = false
                return
            }
        }

        // 重置密码
        const resetPassword = () => {
            // 判断表单是否填写
            if (!codeForm.mobile || !codeForm.ssmCode) {
                message.warning('请填写相关信息')
                return
            }
            const params = {
                checkCode:codeForm.ssmCode,
                password: codeForm.newPass
            }
            apiUpdatePass(params).then((res) => {
                if (res.data.code == 200) {
                    message.success('密码修改成功')
                    codeForm.ssmCode = ''
                    codeForm.newPass = ''
                    codeForm.mobile=''
                }
            })
        }

        // 获取地址


        // 修改地址，成功后更改
        const updateAddress = async () => {
            if (!addressForm.address) {
                message.warning('请输入地址')
                return
            }

            // 判断数据库中是否有地址
            const flag = await apiGetUserAddress({id: state.userInfo.id})
            if (flag.data.data) {
                // 说明已经存在地址，需要更新
                const params = {
                    id: flag.data.data.id,
                    detailAddress: addressForm.address,
                    name:addressForm.nickname,
                    phone: addressForm.mobile
                }
                apiUpdateAddress(params).then((res) => {
                    if (res.data.code == 200) {
                        message.success('地址修改成功')
                        // window.localStorage.setItem('address',addressForm.address )
                        addressForm.address = ''
                    }
                })
            } else {
                // 新增地址
                const params = {
                    accountId: JSON.parse(window.localStorage.getItem('user')).id,
                    detailAddress: addressForm.address,
                    name:addressForm.nickname,
                    phone: addressForm.mobile
                }
                const data = apiAddAddress(params)
                console.log(8999999,data)
                message.success('新增成功')
                addressForm.address = ''
            }
        }

        // 打开订单详情
        const detailHandle = (record) => {
            const params = {
                sn: record.sn
            }
            apiGetOrderDetail(params).then((res) => {
                if (res.data.code == 200) {
                    detailData.showAdd = true
                    detailData.title = '订单详情'
                    detailData.formState = res.data.data
                    detailData.typeName = "view"

                }
            })
        }
        // 关闭
        const handleDetailClose = () => {
            detailData.showAdd = false
        }

        watch(activeKey, async (nv) => {
            if (nv == 2) {
                getOrderList()
            }
            if (nv == 3) {
                getEvaluateList()
            }
            if (nv == 1) {
                // 重新调用接口
                await getUserInfo()
                await getAvatar()
                await getUserAddress()
            }
            if (nv == 5) {
                addressForm.mobile = state.userInfo.mobile
                addressForm.nickname = state.userInfo.nickname
                // console.log(6366, state.userInfo)
            }
        })



        onMounted(async () => {
            await getUserInfo()
            await getAvatar()
            await getUserAddress()

        })
        return {
            ...toRefs(state),
            ...toRefs(tableDataOrder),
            tableEvaluate, // 评价
            activeKey,
            toApply,
            moneyRef,
            changeMoney,
            back,
            applyMoney,
            modifyInfo,
            modalData,
            handleClose,
            changeTable,  // 订单中心分页
            changeEvaluateTable,
            codeForm,
            registerRules,
            labelCol: { span: 5 },
            wrapperCol: { span: 24 },
            deleteEvaluate,
            getLoginCode,
            resetPassword,
            addressForm,
            updateAddress,
            detailHandle,
            detailData,
            handleDetailClose
        }
    }
})
</script>

<style lang="less" scoped>
    .cart {
        height: calc(100vh - 50px) ;
        background: url("../../assets/img/background/bg.jpeg") repeat;
        .space {
            margin: 30px 50px 20px 20px;
            height: 100%;

            .list {
                display: flex;
                font-weight: bold;
                height: 50px;
                line-height: 50px;
                .title {
                    width: 100px;
                }
            }
        }

        .bg{
            margin: 30px 50px 20px 20px;
            height: 80vh;
            background: #fff;
            .money{
                margin: 30px 0 30px 30px;
                text-align: left;
                .title {
                    //margin-top: 20px;
                }
                .item {
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                }
            }

            .password {
                width: 50%;
                padding: 20px 80px;
            }
            .address {
                width: 50%;
                border-left: 1px solid #000;
                padding: 20px 80px;
            }
        }
    }

    ::v-deep .ant-tabs {
        height: 100%;
    }
    ::v-deep .ant-tabs .ant-tabs-left-bar {
        height: 100%;
        width: 15%;
        font-size: 22px;
    }

    ::v-deep .ant-tabs .ant-tabs-left-bar .ant-tabs-nav-container {
        font-size: 22px;
    }

    ::v-deep .ant-tabs .ant-tabs-left-content {
        height: 100%;
    }
    ::v-deep .ant-card-head-title{
        text-align: left;
        font-weight: 800;
        font-size: 20px;
    }
    ::v-deep .ant-image-img {
        //width: 21%;
    }

    ::v-deep .ant-radio-group {
        //margin-right: 20px;
    }

    ::v-deep .ant-btn-primary{
        margin-right: 40px;
    }

    ::v-deep .ant-input-group-wrapper{
        width: 14%;
        margin-left: 20px;
    }

    //::v-deep .ant-input-group > .ant-input:first-child, .ant-input-group-addon:first-child{
    //    //width: 140px;
    //}
</style>
